<script setup lang="ts">
import {
	DeleteOutlined,
	EditOutlined,
	FileSearchOutlined,
	FilterOutlined,
	PartitionOutlined,
	PlusOutlined,
	PrinterOutlined,
	ReloadOutlined,
	SearchOutlined,
} from "@ant-design/icons-vue";

import { h } from "vue";
import { DataBrowsingHeaderProps } from "@/views/dataBrowsing/header/types.ts";
import { invoke } from "@tauri-apps/api/tauri";
import { DefaultOptionType } from "ant-design-vue/es/vc-select/Select";
import DataBrowsingAddDataView from "@/views/dataBrowsing/addData/index.vue";
import DataBrowsingEditDataView from "@/views/dataBrowsing/editData/index.vue";
import { emitter } from "@/utils/mitt.ts";

defineOptions({
	name: "DataBrowsingHeaderView",
});

withDefaults(defineProps<DataBrowsingHeaderProps>(), {
	index: () => "",
});

const state = reactive({
	data: [] as DefaultOptionType[],
	value: "",
	fetching: false,
});

const emit = defineEmits(["changeSearch", "handleRefreshSearch"]);

let lastFetchId = 0;
const handleChange = (value: string) => {
	emit("changeSearch", value);
};
const handleSearch = (val: string, refresh: boolean = false) => {
	lastFetchId += 1;
	const fetchId = lastFetchId;
	state.data = [];
	state.fetching = true;
	invoke("get_indices", {
		index: val,
		refresh: refresh,
		size: 50,
	}).then((res: any) => {
		if (fetchId !== lastFetchId) {
			// for fetch callback order
			return;
		}
		const dataResult = [];
		if (res.data) {
			const dataList = res.data as any[];
			for (const item of dataList) {
				dataResult.push({ value: item.index, label: item.index });
			}
		}
		state.data = dataResult;
		state.fetching = false;
	});
};

function handleRefreshSearch() {
	emit("handleRefreshSearch");
}

onMounted(function () {
	handleSearch("*");
	emitter.on("nodeChange", () => {
		state.data = [];
		state.value = "";
		handleSearch("*", true);
	});
});

onUnmounted(function () {
	emitter.off("nodeChange");
});
</script>

<template>
	<div class="data-browsing-header-view">
		<div class="header-left">
			<a-select
				v-model:value="state.value"
				show-search
				autofocus
				placeholder="请输入索引或者别名"
				:filter-option="false"
				:not-found-content="state.fetching ? undefined : null"
				style="width: 360px"
				:options="state.data"
				@search="handleSearch"
				@change="handleChange"
			/>
			<a-tooltip title="刷新" placement="bottom" color="cyan">
				<a-button type="dashed" :icon="h(ReloadOutlined)" @click="handleRefreshSearch" />
			</a-tooltip>
			<data-browsing-add-data-view />
			<a-tooltip title="删除" placement="bottom" color="cyan">
				<a-button type="dashed" :icon="h(DeleteOutlined)" />
			</a-tooltip>
			<data-browsing-edit-data-view />
		</div>
		<div class="header-right">
			<a-tooltip title="打印" placement="bottom" color="cyan">
				<a-button type="dashed" :icon="h(PrinterOutlined)" />
			</a-tooltip>
			<a-tooltip title="索引结构" placement="bottom" color="cyan">
				<a-button type="dashed" :icon="h(PartitionOutlined)" />
			</a-tooltip>
			<a-tooltip title="跳到基础查询" placement="bottom" color="cyan">
				<a-button type="dashed" :icon="h(SearchOutlined)" />
			</a-tooltip>
			<a-tooltip title="跳到高级查询" placement="bottom" color="cyan">
				<a-button type="dashed" :icon="h(FilterOutlined)" />
			</a-tooltip>
			<a-tooltip title="筛选" placement="bottom" color="cyan">
				<a-button type="dashed" :icon="h(FileSearchOutlined)" />
			</a-tooltip>
		</div>
	</div>
</template>

<style scoped lang="scss">
.data-browsing-header-view {
	padding-top: 20px;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 5px;
}

.header-left,
.header-right {
	display: flex;
	flex-direction: row;
	gap: 5px;
}
</style>
